<template>
	<div>
		<TodoHeader @addTodo="addTodo" />
		<TodoMain />
		<TodoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus" />
	</div>

</template>

<script>
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	export default {
		components: {
			TodoHeader,
			TodoMain,
			TodoFooter
		},
		data() {
			return {
				status: 'all', //all active completed
				list: [
					{ id: 1, name: '晨练', done: false, },
					{ id: 2, name: '练书法', done: true, },
				],
			}
		},

		computed: {
			// 计算剩下没有完成任务的条数
			lastLength() {
				return this.list.filter(item => !item.done).length
			},

			showList() {
				if (this.status === 'all') {
					return this.list;
				}
				if (this.status === 'active') {
					return this.list.filter(item => !item.done)
				}
				if (this.status === 'completed') {
					return this.list.filter(item => item.done)
				}
			}
		},
		methods: {
			addTodo(name) {
				this.list.push({ name, done: false, id: ~~(Math.random() * 1000) })
			},

			delTodo(id) {
				this.list = this.list.filter(item => item.id !== id)
			},

			updateStatus(status) {
				this.status = status // 将子组件的状态赋值给父组件
			},

		},

	}
</script>